<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    总计:{{ prices }}
</div>
<div id="app2">
    当前时间:{{ time }}
</div>
<div id="app3">
    <span>条件渲染</span>
    <p v-if="status===1">status为1时,显示该行</p>
    <p v-else-if="status===2">status为2时,显示该行</p>
    <p v-else>否则显示该行</p>
</div>

<div id="app4">
    <template v-if="type ==='name'">
        <label>用户名:</label>
        <input placeholder="输入用户名">
    </template>
    <template v-else>
        <label>邮箱:</label>
        <input placeholder="输入邮箱">
    </template>
    <button @click="handleToggleClick ">切换输入类型</button>
</div>

<div id="app5">
    <ul>
        <li v-for="(book,index) in books">{{index}}-{{ book.name }}</li>
    </ul>
</div>

<div id="app6">
    <span v-for="(value,key) in user">{{ key }} : {{value}}</span>
</div>

<div id="app7">
    点击次数:{{ count }}
    <button @click.once="count++">+1</button>
</div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            package1: [
                {
                    name: 'iphone7',
                    price: 4500,
                    count: 2
                },
                {
                    name: '一加6',
                    price: 3500,
                    count: 1
                }
            ],
            package2: [
                {
                    name: 'iphone8',
                    price: 5600,
                    count: 4
                },
                {
                    name: '小米8',
                    price: 2900,
                    count: 1
                }
            ]
        },
        computed: {
            prices: function () {
                var prices = 0;
                for (let i = 0; i < this.package1.length; i++) {
                    prices += this.package1[i].price * this.package1[i].count;
                }
                for (let i = 0; i < this.package2.length; i++) {
                    prices += this.package2[i].price * this.package2[i].count;
                }
                return prices;
            }
        }
    })

    var app2 = new Vue({
        el: "#app2",
        data: {
            time: Date.now()
        },
        methods: {},

    })
    var app3 = new Vue({
        el: '#app3',
        data: {
            status: 1
        }
    })

    var app4 = new Vue({
        el: '#app4',
        data: {
            type: 'name'
        },
        methods: {
            handleToggleClick: function () {
                this.type = this.type === 'name' ? 'email' : 'name'
            }
        }
    })

    var app5 = new Vue({
        el: '#app5',
        data: {
            books: [
                {name: 'A'},
                {name: 'B'},
                {name: 'C'}
            ]
        }
    })

    app5.books.push({
        name: '我就是'
    })
    var app6 = new Vue({
        el: "#app6",
        data: {
            user: {
                name: 'shan',
                age: 18,
                sex: '男'
            }
        }
    })
    var app7 = new Vue({
        el: "#app7",
        data: {
            count: 0
        }
    })

</script>

</html>
